<!--  -->
<template>
  <a-layout-sider width="260px" v-if="$store.state.configPanalStatus.left">
    <left-tool-bar
      :leftComponentsList="leftComponentsList"
      @deleteLeftComponent="deleteLeftComponent"
      @getLeftComponents="getLeftComponents"
      @changeAddComponentVisiable="changeAddComponentVisiable"
      @handleEditSvgCompoents="handleEditSvgCompoents"
    />
  </a-layout-sider>
  <!--功能折叠/展开-->
  <div
    class="leftIcon"
    :style="{
      left: $store.state.configPanalStatus.left ? '260px' : '0px',
    }"
    @click="changeLeftLayoutSider"
  >
    <left-outlined v-if="$store.state.configPanalStatus.left" />
    <right-outlined v-else />
  </div>
  <a-layout-content class="centerContain" id="centerContainer">
    <div
      ref="canvas"
      class="editDiv"
      :style="'transform: scale(' + scaleValue + ')'"
      @mousemove="MouseMove"
      @mousedown="MousedownCanvas"
      @mouseup="MouseupCanvas"
      @dblclick="DblClick"
      @mousewheel="MouseWheel"
      v-if="$store.state.BGIMG.ID != 'MAP'"
    >
      <!--拖动辅助线-->
      <div
        id="guide-x"
        ref="guidex_dom"
        :style="'border-top: ' + 1 / scaleValue + 'px dashed #55f'"
      ></div>
      <div
        id="guide-y"
        ref="guidey_dom"
        :style="'border-left: ' + 1 / scaleValue + 'px dashed #55f'"
      ></div>
      <div
        id="svgContainer"
        :style="{
          'background-image':
            $store.state.BGIMG.TYPE != 'default'
              ? `url(${$store.state.BGIMG.BASE64DATA})`
              : '',
          backgroundColor:
            $store.state.BGIMG.TYPE == 'default' ? '#000000' : '',
          width: $store.state.windowAttributes.absoluteWidth + 'px',
          height: $store.state.windowAttributes.absoluteHeight + 'px',
        }"
        class="container"
        ref="svgContainer"
      >
        <!-- 画布 -->
        <svg
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          preserveAspectRatio="xMinYMin meet"
          class="svgContent"
          id="svgCanvas"
        >
          <defs />
          <filter x="0" y="0" width="1" height="1" id="solid">
            <feFlood flood-color="rgb(255,255,255)" />
            <feComposite in="SourceGraphic" />
          </filter>
          <g
            style="cursor: pointer"
            v-for="(item, index) in templateSvgLists"
            :key="item"
            :id="item.id"
            :class="
              selectTemplateSvg.componentDataId == item.componentDataId
                ? 'topo-layer-view-selected'
                : ''
            "
            @mousedown="MousedownSvg(item, index, $event)"
            :title="item.title"
            :transform="
              'translate(' +
              item.svgPositionX +
              ',' +
              item.svgPositionY +
              ')' +
              'rotate(' +
              item.angle +
              ')' +
              'scale(' +
              item.size +
              ')'
            "
            @contextmenu.prevent="contextmenuEvent"
          >
            <register-components
              :component_prop="item"
              :svgInfoData="templateSvgLists"
            />
          </g>
          <g>
            <!-- <foreignObject x="0" y="0" width="600" height="500">
              <dv-border-box1 >
                <div dv-bg>dv-border-box8</div>
              </dv-border-box1>
            </foreignObject> -->
          </g>
        </svg>
      </div>
    </div>
    <!-- 右键菜单 -->
    <ul ref="contextMenuRef" class="contextMenu" v-show="display_contextmenu">
      <li
        v-for="(item, index) in contextmenu_data"
        :key="index"
        @click="rightMenuEvent(item)"
      >
        <p :class="item.enable ? '' : 'disabled'">
          {{ item.name }}
          <span class="shortcut">{{ item.hotkey }}</span>
        </p>
      </li>
    </ul>
  </a-layout-content>
  <a-layout-sider width="300px" v-if="$store.state.configPanalStatus.right">
    <right-tool-bar
      ref="rightToobar"
      :selectTemplateSvg="selectTemplateSvg"
      :templateId="templateId"
      @createTemplate="createTemplate"
      @changeSelectTemplateSvg="changeSelectTemplateSvg"
      @changeTemplateSvgListsStatus="changeTemplateSvgListsStatus"
    />
  </a-layout-sider>
  <!--功能折叠/展开-->
  <div
    class="rightIcon"
    :style="{
      right: $store.state.configPanalStatus.right ? '300px' : '0px',
    }"
    @click="changeRightLayoutSider"
  >
    <right-outlined v-if="$store.state.configPanalStatus.right" />
    <left-outlined v-else />
  </div>
  <!-- add components -->
  <add-components
    :addComponentVisible="addComponentVisible"
    :getPopupContainer="getPopupContainer"
    @confirmAddSvg="confirmAddSvg"
    @cancel="changeAddComponentVisiable"
  />
  <!--add editTemplate-->
  <submit-template
    v-if="submitTemplateVisiable"
    :submitTemplateVisiable="submitTemplateVisiable"
    :submitTemplateParams="submitTemplateParams"
    @createTemplate="createTemplate(submitTemplateParams)"
    @cancelSubmitTemplate="changeSubmitTemplateVisiable"
  />
  <!--edit svg-->
  <edit-svg-component
    :editSvgModalVisible="editSvgModalVisible"
    :updataEditSvg="updataEditSvg"
    @changeEditModalStatus="changeEditModalStatus"
    @getLeftComponents="getLeftComponents"
  />
</template>
<script>
import registerComponents from '@/components/svgComponents/registerComponents.vue';
import rightToolBar from '@/components/svgComponents/rightToolBar.vue';
import html2canvas from 'html2canvas';

import addComponents from '@/components/svgComponents/addComponents.vue';
import leftToolBar from '@/components/svgComponents/leftToolBar.vue';
import editSvgComponent from '@/components/svgComponents/editSvgComponent.vue';
import submitTemplate from '@/common/submitTemplate.vue';
import {
  addWaterTemplate,
  userUploader,
  deleteComponent,
  listComponent,
  addComponent,
} from '@/network/api';
import {
  RightOutlined,
  LeftOutlined,
  CompressOutlined,
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import {
  hotkeyCopy,
  hotkeyDel,
  hotkeyPutOnTop,
  hotkeyPutOnButtom,
  hotkeyPutOnUp,
  hotkeyPutOnDown,
} from '@/util/HotkeyFunc.js';
import { convertCanvasToImage } from '@/util/index';
export default {
  emits: ['echoEditSvgTemplate'],
  inject: ['getScreenFullNode'],
  components: {
    registerComponents,
    rightToolBar,
    leftToolBar,
    RightOutlined,
    LeftOutlined,
    addComponents,
    CompressOutlined,
    submitTemplate,
    editSvgComponent,
  },
  data() {
    return {
      templateId: '',
      scaleValue: 1, //缩放倍数
      templateSvgLists: [],
      selectTemplateSvg: {},
      updataEditSvg: {}, //当前编辑svg
      isEcho: false,
      editSvgModalVisible: false,
      submitTemplateParams: {
        templateName: '',
        remark: '',
        backgroundImg: '', //背景图
        previewImg: '', //自动截屏预览图片
        components: [], //组件列表
        waterTemplateId: '',
      },
      selectSvg: {
        componentDataId: '', //要移动的svg
        Index: 0,
        mPositionX: 0, //选中svg时鼠标的x轴坐标
        mPositionY: 0, //选中svg时鼠标的y轴坐标
        pointX: 0, //选中svg时svg的x轴坐标
        pointY: 0, //选中svg时svg的y轴坐标
      },
      //鼠标右键
      contextmenu_data: [
        {
          name: '复制',
          type: 'copy',
          hotkey: 'Ctrl+C',
          enable: true,
        },
        {
          name: '删除',
          type: 'delete',
          hotkey: 'Delete',
          enable: false,
        },
        {
          name: '置于顶层',
          type: 'top',
          hotkey: 'Ctrl+→',
          enable: true,
        },
        {
          name: '置于底层',
          hotkey: 'Ctrl+←',
          type: 'bottom',
          enable: true,
        },
        {
          name: '置于上一层',
          type: 'addTop',
          hotkey: 'Ctrl+↑',
          enable: true,
        },
        {
          name: '置于下一层',
          hotkey: 'Ctrl+↓',
          type: 'nextBottom',
          enable: true,
        },
      ],
      mouseStatus: 0, // 鼠标状态 1按下； 0弹起
      clickType: '', //鼠标点击行为
      display_contextmenu: false,
      leftComponentsList: [],
      addComponentVisible: false,
      submitTemplateVisiable: false,
    };
  },
  computed: {
    getPopupContainer() {
      return this.getScreenFullNode();
    },
  },
  mounted() {
    let _this = this;
    _this.$nextTick(() => {
      let canvasdiv = _this.$refs.canvas;
      canvasdiv.addEventListener(
        'dragover',
        function (e) {
          e.preventDefault();
        },
        false
      );
      canvasdiv.addEventListener(
        'drop',
        function (e) {
          e.preventDefault();
          if (
            _this.$store.state.CurrentlySelectedToolBar.CreateType !=
            'draggable'
          ) {
            return;
          }
          let eChartsOption =
            _this.$store.state.CurrentlySelectedToolBar.EChartsOption;
          //根据类型和鼠标位置创建组件
          let svgItem = {
            componentDataId: _this.$UCore.GenUUid(),
            imgType: _this.$store.state.CurrentlySelectedToolBar.ImgType,
            createType: _this.$store.state.CurrentlySelectedToolBar.CreateType,
            title: _this.$store.state.CurrentlySelectedToolBar.Title,
            template: _this.$store.state.CurrentlySelectedToolBar.Template,
            props: ['prop_data'],
            type: _this.$store.state.CurrentlySelectedToolBar.Type,
            typeName: _this.$store.state.CurrentlySelectedToolBar.TypeName,
            svgPositionX: e.offsetX,
            svgPositionY: e.offsetY,
            echartsOption: eChartsOption ? JSON.parse(eChartsOption) : '',
            size: 1,
            angle: 0,
            componentDataSource: null, //组件数据源
            dataKeyId: '', //数值keyId
            dataKeyValue: '',
            stateKeyValue: '',
            stateKeyId: '', //状态keyId
            hideAddGroup: false, //group status
            defaultAttr: JSON.parse(
              JSON.stringify(
                _this.$store.state.CurrentlySelectedToolBar.Default_Attr
              )
            ),
          };
          _this.templateSvgLists.push(svgItem);
          _this.selectTemplateSvg = svgItem;
          _this.$store.setconfigPanalStatusVal(true, 'right');
        },
        false
      );
    });
    // this.getLeftComponents();
  },
  created() {
    let _this = this;
    //当前页面监视键盘输入
    document.onkeydown = function (e) {
      //获取当前选中组件
      let selectTemplateSvg = _this.selectTemplateSvg;
      if (
        selectTemplateSvg == undefined ||
        selectTemplateSvg == null ||
        selectTemplateSvg == '' ||
        selectTemplateSvg == {} ||
        _this.addComponentVisible ||
        _this.editSvgModalVisible ||
        _this.submitTemplateVisiable
      ) {
        return;
      }
      //事件对象兼容
      let e1 = e || window.event || arguments.callee.caller.arguments[0];
      //键盘按键判断:左箭头->37;上箭头->38；右箭头->39;下箭头->40;esc->27
      if (e1 && !e1.ctrlKey && e1.keyCode == 37) {
        e.preventDefault();
        selectTemplateSvg.svgPositionX -= 1;
      } else if (e1 && !e1.ctrlKey && e1.keyCode == 38) {
        e.preventDefault();
        selectTemplateSvg.svgPositionY -= 1;
      } else if (e1 && !e1.ctrlKey && e1.keyCode == 39) {
        e.preventDefault();
        selectTemplateSvg.svgPositionX += 1;
      } else if (e1 && !e1.ctrlKey && e1.keyCode == 40) {
        e.preventDefault();
        selectTemplateSvg.svgPositionY += 1;
      }
      //ctrl  c
      else if (e1 && e1.ctrlKey && e1.keyCode == 67) {
        if (!_this.editTemplateVisible) {
          e.preventDefault();
          let copySvgInfoStr = JSON.stringify(selectTemplateSvg);
          let copySvgInfo = JSON.parse(copySvgInfoStr);
          copySvgInfo.componentDataId = _this.$UCore.GenUUid();
          copySvgInfo.svgPositionX = selectTemplateSvg.svgPositionX + 10;
          copySvgInfo.svgPositionY = selectTemplateSvg.svgPositionY + 10;
          _this.templateSvgLists.push(copySvgInfo);
          _this.selectTemplateSvg = copySvgInfo;
        }
      }
      //deleted
      else if (e1 && e1.keyCode == 46) {
        e.preventDefault();
        //根据当前id找到当前元素的index
        let selectSvgIndex = _this.templateSvgLists.indexOf(
          _this.templateSvgLists.filter(
            (f) => f.componentDataId == selectTemplateSvg.componentDataId
          )[0]
        );
        _this.templateSvgLists.splice(selectSvgIndex, 1);
      } //上移一层
      else if (e1 && e1.ctrlKey && e1.key == 'ArrowUp') {
        e.preventDefault();
        hotkeyPutOnUp(_this.templateSvgLists, _this.selectSvg);
      }
      //下移一层
      else if (e1 && e1.ctrlKey && e1.key == 'ArrowDown') {
        e.preventDefault();
        hotkeyPutOnDown(_this.templateSvgLists, _this.selectSvg);
      }
      //置于底层
      else if (e1 && e1.ctrlKey && e1.key == 'ArrowLeft') {
        e.preventDefault();
        hotkeyPutOnButtom(_this.templateSvgLists, _this.selectSvg);
      }
      //置于顶层
      else if (e1 && e1.ctrlKey && e1.key == 'ArrowRight') {
        e.preventDefault();
        hotkeyPutOnTop(_this.templateSvgLists, _this.selectSvg);
      }
    };
  },
  methods: {
    handleEditSvgCompoents(item) {
      this.updataEditSvg = {};
      this.changeEditModalStatus();
      this.updataEditSvg = JSON.parse(
        JSON.stringify(
          Object.assign(item.selectItem, {
            handPoint: {
              startX: 100,
              startY: 100,
              endX: 200,
              endY: 200,
            },
            svgPositionX: 0,
            svgPositionY: 0,
          })
        )
      ); //兼容以前的组件没有增加key的字段
      for (let key in item.selectItem.defaultAttr) {
        //绑定key
        this.updataEditSvg.defaultAttr[key].key = key;
      }
    },
    changeEditModalStatus() {
      this.editSvgModalVisible = !this.editSvgModalVisible;
    },
    changeSubmitTemplateVisiable(val) {
      this.submitTemplateVisiable = val;
    },
    changeLeftLayoutSider() {
      this.$store.setconfigPanalStatusVal(
        !this.$store.state.configPanalStatus.left
      );

      this.getLeftComponents();
    },
    changeRightLayoutSider() {
      //非回显模式
      if (!this.isEcho) {
        this.$store.setconfigPanalStatusVal(
          !this.$store.state.configPanalStatus.right,
          'right'
        );
        this.$store.state.configPanalStatus.right
          ? this.templateSvgLists
            ? this.templateSvgLists.forEach((componentItem) => {
                componentItem.hideAddGroup = false;
              })
            : ''
          : '';
      } else {
        this.$store.state.configPanalStatus.right
          ? this.$refs.rightToobar.checkGroupStatus()
          : this.$store.setconfigPanalStatusVal(
              !this.$store.state.configPanalStatus.right,
              'right'
            );
      }
    },
    confirmAddSvg(val) {
      this.$httpRequest(
        addComponent,
        {
          createType: val.createType,
          defaultAttr:
            val.imgType == 'img' ? null : JSON.stringify(val.defaultAttr),
          imgType: val.imgType,
          priviewImg: val.priviewImg,
          template: val.template,
          title: val.title,
          type: val.type,
        },
        'post'
      ).then(() => {
        message.success('添加成功~');
        this.addComponentVisible = false;
        this.getLeftComponents();
      });
    },
    changeAddComponentVisiable(val) {
      this.addComponentVisible = val;
    },
    deleteLeftComponent(id) {
      this.$httpRequest(deleteComponent, { componentId: id }, 'delete').then(
        () => {
          message.success('删除操作成功~');
          this.getLeftComponents();
        }
      );
    },
    getLeftComponents() {
      //请求接口获取组件
      this.$httpRequest(listComponent).then((res) => {
        res?.data
          ? res.data.forEach((item) => {
              item.defaultAttr = JSON.parse(item.defaultAttr);
            })
          : '';
        this.leftComponentsList = res?.data ? res.data : [];
      });
    },
    resetTemplateModel() {
      this.templateId = '';
      this.isEcho = false;
      this.submitTemplateParams = {
        templateName: '',
        remark: '',
        backgroundImg: '', //背景图
        previewImg: '', //自动截屏预览图片
        components: [], //组件列表
        waterTemplateId: '',
      };
      this.selectSvg = {};
      this.$store.clearCurrentlySelectBase64DataAction();
      this.selectTemplateSvg = {};
      this.templateSvgLists = [];
      //右侧配置面板是否显示
      if (this.$store.state.configPanalStatus.right) {
        this.$refs.rightToobar.resetGroup();
      } else {
        this.$store.setconfigPanalStatusVal(true, 'right');
        this.$nextTick(() => {
          this.$refs.rightToobar.resetGroup();
        });
      }
    },
    //回显
    editSvgTemplate(val) {
      this.isEcho = true;
      this.templateId = val.waterTemplateId;
      this.templateSvgLists = val.waterTemplateInfo.map((item) => {
        item.props = ['prop_data'];
        item.defaultAttr = JSON.parse(item.defaultAttr);
        item.size = Number(item.size);
        item.svgPositionX = Number(item.svgPositionX);
        item.svgPositionY = Number(item.svgPositionY);
        return item;
      });
      //背景图片处理
      if (val.backgroundImg == '#000000' || val.base64Data == '#000000') {
        this.$store.clearCurrentlySelectBase64DataAction();
      }
      // this.selectTemplateSvg = this.templateSvgLists[0];
      this.submitTemplateParams.components = this.templateSvgLists;
      this.submitTemplateParams.templateName = val.templateName;
      this.submitTemplateParams.remark = val.remark;
      setTimeout(() => {
        this.$refs.rightToobar.getTemplateGroup(val.waterTemplateId);
      }, 0);
    },
    createTemplate(val) {
      val ? Object.assign(this.submitTemplateParams, val) : '';
      this.submitTemplateParams.components = JSON.parse(
        JSON.stringify(this.templateSvgLists)
      );
      if (!this.submitTemplateParams.components.length) {
        message.error('模板内容不能为空哦~');
      } else {
        //获取编辑的图片链接
        this.selectTemplateSvg = {};
        this.getImgUrl(this.$refs.svgContainer).then((url) => {
          this.submitTemplateParams.previewImg = url; //自动截屏预览图片
          this.submitTemplateParams.backgroundImg =
            this.$store.state.BGIMG.BASE64DATA; //背景图片
          //translate to string
          this.submitTemplateParams.components
            ? this.submitTemplateParams.components.forEach((item) => {
                item.defaultAttr = JSON.stringify(item.defaultAttr);
              })
            : '';
          this.submitTemplateParams.waterTemplateId = this.templateId
            ? this.templateId
            : '';
          this.$httpRequest(
            addWaterTemplate,
            this.submitTemplateParams,
            'post'
          ).then((res) => {
            this.templateId = res.data;
            message.success('保存模板成功~');
            //保存模板关联的分组信息
            this.$store.state.configPanalStatus.right && val
              ? this.$refs.rightToobar.submitGroup(
                  this.templateId,
                  'submitTemplate'
                )
              : '';
            // this.submitTemplateParams = {};
            // this.selectTemplateSvg = this.templateSvgLists[0];
          });
        });
      }
    },
    //获取图片路径
    getImgUrl(modal) {
      return new Promise((resolve, reject) => {
        this.$nextTick(() => {
          html2canvas(modal, {
            backgroundColor: '#fff',
            allowTaint: true,
            useCORS: true, // 解决资源跨域问题
            logging: true,
          })
            .then((canvas) => {
              let imgsrc = canvas.toDataURL('image/png');
              this.$httpRequest(
                userUploader,
                convertCanvasToImage(imgsrc),
                'post',
                'multipart/form-data'
              )
                .then((res) => {
                  resolve(res.filePath);
                })
                .catch((err) => {
                  reject(err);
                });
            })
            .catch((err) => {
              reject(err);
            });
        });
      });
    },
    //改变svgLists状态
    changeTemplateSvgListsStatus(list) {
      this.templateSvgLists.forEach((svgItem) => {
        list.forEach((item) => {
          item.componentDataId == svgItem.componentDataId
            ? Object.assign(svgItem, item)
            : '';
        });
      });
    },
    changeSelectTemplateSvg(val) {
      this.selectTemplateSvg = val;
    },
    MouseMove(e) {
      let _this = this;
      if (this.clickType == 'draggable') {
        if (this.mouseStatus == 0) {
          return;
        }
        const { clientX, clientY } = e;
        let componentDataId = this.selectSvg.componentDataId;
        //排除当前元素剩下的所有svg元素的列表
        let anyPositionList = this.templateSvgLists.filter(function (list) {
          return list.componentDataId != componentDataId;
        });
        //将要移动的元素坐标设备为鼠标坐标
        let svgPositionX = this.selectSvg.pointX;
        let svgPositionY = this.selectSvg.pointY;
        svgPositionX += (clientX - this.selectSvg.mPositionX) / this.scaleValue;
        svgPositionY += (clientY - this.selectSvg.mPositionY) / this.scaleValue;
        setTimeout(function () {
          //少于十个像素自动吸附
          //从所有的x坐标列表中查与当前坐标少于10个像素的组件是否存在
          let exitsAdsorbX = anyPositionList.filter(function (list) {
            return (
              -10 < list.svgPositionX - svgPositionX &&
              list.svgPositionX - svgPositionX < 10
            );
          });
          if (exitsAdsorbX.length > 0) {
            svgPositionX = exitsAdsorbX[0].svgPositionX;
          }
          //y轴相同 横向坐标自动吸附
          let exitsAdsorbY = anyPositionList.filter(function (list) {
            return (
              -10 < list.svgPositionY - svgPositionY &&
              list.svgPositionY - svgPositionY < 10
            );
          });
          if (exitsAdsorbY.length > 0) {
            svgPositionY = exitsAdsorbY[0].svgPositionY;
          }
          _this.templateSvgLists[_this.selectSvg.Index].svgPositionX =
            svgPositionX;
          _this.templateSvgLists[_this.selectSvg.Index].svgPositionY =
            svgPositionY;
          //从所有的x坐标列表中查当前坐标是否存在
          let exitsNowX = anyPositionList.filter(function (list) {
            return list.svgPositionX === svgPositionX;
          });
          if (exitsNowX.length > 0) {
            _this.$refs.guidey_dom.style.setProperty(
              'left',
              svgPositionX - 1 / _this.scaleValue + 'px'
            );
            _this.$refs.guidey_dom.style.display = 'inline';
          } else {
            _this.$refs.guidey_dom.style.display = 'none';
          }
          //从所有的y坐标列表中查当前坐标是否存在
          let exitsNowY = anyPositionList.filter(function (list) {
            return list.svgPositionY === svgPositionY;
          });
          if (exitsNowY.length > 0) {
            _this.$refs.guidex_dom.style.setProperty(
              'top',
              svgPositionY - 1 / _this.scaleValue + 'px'
            );
            _this.$refs.guidex_dom.style.display = 'inline';
          } else {
            _this.$refs.guidex_dom.style.display = 'none';
          }
        }, 1);
      } else if (this.clickType == 'draw') {
        if (this.mouseStatus == 0) {
          return;
        }
        this.selectTemplateSvg.handPoint.endX = e.offsetX;
        this.selectTemplateSvg.handPoint.endY = e.offsetY;
      }
    },
    MousedownCanvas(e) {
      e.button !== 2 ? (this.display_contextmenu = false) : '';
      if (this.clickType == 'draggable') {
        return;
      }

      if (
        this.$store.state.CurrentlySelectedToolBar &&
        this.$store.state.CurrentlySelectedToolBar.CreateType == 'draw'
      ) {
        //根据类型和鼠标位置创建组件
        let svgItem = {
          //不用后端的唯一id，考虑到复制组件问题
          componentDataId: this.$UCore.GenUUid(),
          imgType: this.$store.state.CurrentlySelectedToolBar.ImgType,
          createType: this.$store.state.CurrentlySelectedToolBar.CreateType,
          title: this.$store.state.CurrentlySelectedToolBar.Title,
          type: this.$store.state.CurrentlySelectedToolBar.Type,
          typeName: this.$store.state.CurrentlySelectedToolBar.TypeName,
          props: ['prop_data'],
          template: this.$store.state.CurrentlySelectedToolBar.Template,
          defaultAttr: JSON.parse(
            JSON.stringify(
              this.$store.state.CurrentlySelectedToolBar.Default_Attr
            )
          ),
          hideAddGroup: false, //group status
          svgPositionX: e.offsetX,
          svgPositionY: e.offsetY,
          handPoint: {
            startX: e.offsetX,
            startY: e.offsetY,
            endX: e.offsetX,
            endY: e.offsetY,
          },
          componentDataSource: null, //组件数据源
          dataKeyId: '', //数值keyId
          dataKeyValue: '',
          stateKeyValue: '',
          stateKeyId: '', //状态keyId
          size: 1,
          angle: 0,
        };
        console.log(svgItem);
        this.templateSvgLists.push(svgItem);
        this.selectTemplateSvg = svgItem;
        this.$store.setconfigPanalStatusVal(true, 'right');
        this.mouseStatus = 1;
        this.clickType = 'draw';
      }
    },
    MouseupCanvas() {
      if (this.mouseStatus == 0) {
        return;
      }
      this.$refs.guidex_dom.style.display = 'none';
      this.$refs.guidey_dom.style.display = 'none';
      this.mouseStatus = 0;
      if (this.clickType == 'draggable') {
        this.clickType = '';
      }
      if (this.clickType == 'draw') {
        if (
          this.selectTemplateSvg.handPoint.startX ==
            this.selectTemplateSvg.handPoint.endX &&
          this.selectTemplateSvg.handPoint.startY ==
            this.selectTemplateSvg.handPoint.endY
        ) {
          //根据当前id找到当前元素的index
          let selectSvgIndex = this.templateSvgLists.indexOf(
            this.templateSvgLists.filter(
              (f) => f.componentDataId == this.selectTemplateSvg.componentDataId
            )[0]
          );
          this.templateSvgLists.splice(selectSvgIndex, 1);
          this.selectSvg = {};
          this.selectTemplateSvg = {};
        }
      }
    },
    DblClick() {
      this.selectTemplateSvg = '';
      this.$store.clearCurrentlySelectedToolBarAction();
      //改变当前工具栏状态
      this.$store.setconfigPanalStatusVal(
        !this.$store.state.configPanalStatus.left
      );
      //非回显模式
      if (!this.isEcho) {
        this.$store.setconfigPanalStatusVal(
          !this.$store.state.configPanalStatus.right,
          'right'
        );
        this.$store.state.configPanalStatus.right
          ? this.templateSvgLists
            ? this.templateSvgLists.forEach((componentItem) => {
                componentItem.hideAddGroup = false;
              })
            : ''
          : '';
      } else {
        this.$store.state.configPanalStatus.right
          ? this.$refs.rightToobar.checkGroupStatus()
          : this.$store.setconfigPanalStatusVal(
              !this.$store.state.configPanalStatus.right,
              'right'
            );
      }
      this.$store.state.configPanalStatus.left ? this.getLeftComponents() : '';
    },
    MouseWheel(e) {
      //获取当前选中组件
      let selectTemplateSvg = this.selectTemplateSvg;
      if (
        selectTemplateSvg == undefined ||
        selectTemplateSvg == null ||
        selectTemplateSvg == ''
      ) {
        return;
      }
      e.preventDefault();
      //判断滚轮方向 -100是往上滑 100是下滑
      let svgZoom = e.deltaY < 0 ? 0.1 : -0.1;
      selectTemplateSvg.size += svgZoom;
      selectTemplateSvg.size = parseFloat(selectTemplateSvg.size.toFixed(1));
      if (selectTemplateSvg.size < 1) {
        selectTemplateSvg.size = 1;
      }
    },
    scaleValueChange(newValue) {
      this.scaleValue = newValue;
    },
    MousedownSvg(item, index, e) {
      this.$store.clearCurrentlySelectedToolBarAction();
      //从数组里面根据index找到当前元素
      this.selectSvg.componentDataId = item.componentDataId;
      this.selectSvg.Index = index;
      this.mouseStatus = 1;
      this.selectSvg.mPositionX = e.clientX;
      this.selectSvg.mPositionY = e.clientY;
      this.selectSvg.pointX = item.svgPositionX;
      this.selectSvg.pointY = item.svgPositionY;
      this.selectTemplateSvg = this.templateSvgLists[index];
      // !this.$store.state.configPanalStatus.right
      //   ? this.$store.setconfigPanalStatusVal(true, 'right')
      //   : '';
      this.clickType = 'draggable';
    },
    contextmenuEvent(e) {
      const contextMenuRef = this.$refs.contextMenuRef;
      this.display_contextmenu = true;
      contextMenuRef.style.left = e.pageX + 'px';
      contextMenuRef.style.top = e.pageY - 80 + 'px';
      this.contextmenu_data.map((m) => (m.enable = true));
      //判断当前选中组件的index
      if (this.templateSvgLists.length === 1) {
        //禁用下移
        this.contextmenu_data[3].enable = false;
        this.contextmenu_data[5].enable = false;
        //禁用上移
        this.contextmenu_data[2].enable = false;
        this.contextmenu_data[4].enable = false;
      } else if (this.selectSvg.Index === 0) {
        //禁用下移
        this.contextmenu_data[3].enable = false;
        this.contextmenu_data[5].enable = false;
      } else if (this.selectSvg.Index === this.templateSvgLists.length - 1) {
        //禁用上移
        this.contextmenu_data[2].enable = false;
        this.contextmenu_data[4].enable = false;
      }
    },
    //右键菜单操作
    rightMenuEvent(item) {
      switch (item.type) {
        case 'copy':
          if (!item.enable) return;
          hotkeyCopy(this.templateSvgLists, this.selectSvg, this);
          this.display_contextmenu = false;
          break;
        case 'delete':
          if (!item.enable) return;
          hotkeyDel(this.templateSvgLists, this.selectSvg);
          this.display_contextmenu = false;
          this.selectTemplateSvg = {};
          break;
        case 'top':
          if (!item.enable) return;
          hotkeyPutOnTop(this.templateSvgLists, this.selectSvg);
          this.display_contextmenu = false;
          break;
        case 'bottom':
          if (!item.enable) return;
          hotkeyPutOnButtom(this.templateSvgLists, this.selectSvg);
          this.display_contextmenu = false;
          break;
        case 'addTop':
          if (!item.enable) return;
          hotkeyPutOnUp(this.templateSvgLists, this.selectSvg);
          this.display_contextmenu = false;
          break;
        case 'nextBottom':
          if (!item.enable) return;
          hotkeyPutOnDown(this.templateSvgLists, this.selectSvg);
          this.display_contextmenu = false;
          break;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.leftIcon {
  position: fixed;
  top: 50%;
  color: white;
  height: 88px;
  z-index: 999;
  background: #15a3fa;
  line-height: 88px;
  border-radius: 0px 5px 5px 0px;
}

.leftIcon:hover {
  cursor: pointer;
}

.rightIcon {
  position: fixed;
  top: 50%;
  color: white;
  height: 88px;
  z-index: 999;
  background: #15a3fa;
  line-height: 88px;
  border-radius: 5px 0px 0px 5px;
}

.rightIcon:hover {
  cursor: pointer;
}

.button {
  display: flex;

  div {
    text-align: center;
    flex: 1;
  }
}

.centerContain {
  left: 260px;
  right: 300px;
  top: 0;
  bottom: 0;
  overflow: auto !important;
  overflow-x: auto !important;
  transition: all 0.3s;
  z-index: 111;

  &.fixed {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

  .canvansDiv {
    width: 1920px;
    height: 1080px;
    transform-origin: left top;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
  }

  .canvas-content {
    width: 1920px;
    height: 1080px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
  }

  .btns-content {
    position: fixed;
    bottom: 10px;
    right: 320px;
    left: 280px;

    button {
      margin-left: 10px;
    }
  }
}

#components-layout .ant-layout-sider {
  background: #fff;
  color: rgb(167, 164, 164);
}

#guide-x {
  display: none;
  position: absolute;
  width: 100%;
  left: 0px;
  top: 0px;
}

#guide-y {
  display: none;
  position: absolute;
  height: 100%;
  left: 0px;
  top: 0px;
}

.ant-slider {
  margin-bottom: 16px;
}

.topo-layer-view-selected {
  outline: 1px solid #0cf;
}

.contextMenu {
  position: absolute;
  z-index: 99999;
  background: #ffffff;
  padding: 5px 0;
  margin: 0px;
  display: block;
  border-radius: 5px;
  box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);

  li {
    list-style: none;
    padding: 0px;
    margin: 0px;

    p {
      text-decoration: none;
      display: block;
      padding: 0px 15px 1px 20px;
      margin: 0;
      user-select: none;
      -webkit-user-select: none;

      .shortcut {
        width: 115px;
        text-align: right;
        float: right;
      }
    }

    p:hover {
      background-color: #0cf;
      color: #ffffff;
      cursor: default;
    }

    .disabled {
      color: #999;
    }

    .disabled:hover {
      color: #999;
      background-color: transparent;
    }
  }

  li.separator {
    border-top: solid 1px #e3e3e3;
    padding-top: 5px;
    margin-top: 5px;
  }
}

.container {
  background-size: cover;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  overflow: hidden;
}

.screenSvg {
  position: relative;
  right: 20px;
  top: 20px;
}

.svgContent {
  height: 100%;
  width: 100%;
}
</style>
